import React, { Component } from 'react';
import FooterPage from '@components/layout/footerPage';
import { Menu, Table ,Breadcrumb } from 'antd';
import { useState } from 'react';
import axios from 'axios';
import { useEffect } from 'react';
import './index.less';


const Overview = (props) => {
  const [current, setCurrent] = useState('team');
  const [teamData, setteamData] = useState([]);
  const [memberData, setmemberData] = useState([]);
  const [academicData, setacademicData] = useState([]);
  // const [officeData, setofficeData] = useState([]);
  const [breadcrumbItems, setBreadcrumbItems] = useState([
    {
      title: '首页',
    },
    {
      title: <a href="">实验室概况</a>,
    },
    {
      title: <a href="">实验室团队</a>,
    },
  ]);
  const getJobTitle = (code) => {
    switch (code) {
      case 0:
        return '讲师';
      case 1:
        return '副教授';
      case 2:
        return '教授';
      default:
        return '';
    }
  };
  useEffect(() => {
    const fetchData = async () => {
      try {
        const teamResponse = await axios.get('http://localhost:8080/web/lab_team/list',{});
        setteamData(teamResponse.data.data);
        console.log(teamResponse)

        const academicResponse = await axios.get('http://localhost:8080/web/lab_committee/list');
        setacademicData(academicResponse.data.data);
        // const formattedData = academicResponse.data.data.map((item) => ({
        //   ...item,
        //   title: getJobTitle(item.title), // 将数字转换为文字
        // }));
        // setacademicData(formattedData);
      const memberResponse = await axios.get('http://localhost:8080/web/lab_member/list');
        setmemberData(memberResponse.data.data);

        // const officeResponse = await axios.get('/api/patent');
        // setofficeData(officeResponse.data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);


  const handleClick = (e) => {
    setCurrent(e.key);
    // 根据选中的菜单项更新面包屑导航文字
    const breadcrumbItems = [
      {
        title: '首页',
      },
      {
        title: <a href="">实验室概况</a>,
      },
      {
        title: <a href="">{getBreadcrumbTitle(e.key)}</a>,
      },
    ];
  
    setBreadcrumbItems(breadcrumbItems); // 更新组件的状态 breadcrumbItems
    const nonshowList = document.querySelectorAll('.nonshow1');
    nonshowList.forEach((element) => {
      element.classList.remove('show');
    });
    document.getElementById(e.key).classList.add('show');
  };
    const getBreadcrumbTitle = (key) => {
      switch (key) { // 根据 key 值返回对应的面包屑导航文字
        case 'team':
          return '实验室团队';
        case 'academic':
          return '学术委员会';
        case 'office':
          return '实验室人员';
        default:
          return '';
      }
    };

    const columns = [
    {
        title: '团队名称',
        dataIndex: 'name',
        
    },
    {
        title: '负责人',
        dataIndex: 'head',
        
    },
    ];

    const wycolumns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '职务',
        dataIndex: 'duties',
        key: 'duties',
      },
      {
          title: '职称',
          dataIndex: 'title',
          key: 'title',
      },
      {
          title: '单位',
          dataIndex: 'unit',
          key: 'unit',
      },
    ];
    const paginationConfigt = {
      pageSize: 10, // 每页显示的条数
    };

    return (
        <div className={'overview'}>
          <div className={'content01'}>
            {/*左导航*/}
            <div className={'left-box-01'}>
              <div className={'kong-01'}></div>
              <Menu  style={{fontSize:"18px",}} onClick={handleClick} selectedKeys={[current]} mode="inline">
                <Menu.Item  key="team">实验室团队</Menu.Item>       
                <Menu.Item key="academic" >学术委员会</Menu.Item>
                <Menu.Item  key="office" >实验室人员</Menu.Item>
              </Menu>     
            </div>
            {/*右展示框 */}
            <div className={'right-box-01'}>
              <div className={'right-top'}>
                <p>实验室概况</p>
                <div className={'nav-path ov'}>
                <span>
                  <Breadcrumb style={{marginTop:"10px"}} items={breadcrumbItems} />              
                </span>
                </div>
              </div>
              <div className={'nonshow1 show'} id="team">
                  <Table dataSource={teamData} columns={columns} pagination={paginationConfigt}/>
              </div>

              <div className={'nonshow1'} id="academic">

                  <Table dataSource={academicData} columns={wycolumns} pagination={paginationConfigt}/>

              </div>
              <div className={'nonshow1'} id="office" >
                <div className={'ri-forth'}>
                    <table className='peo-box'>
                      <tbody >
                        {memberData.map((item) => (
                          <React.Fragment key={item.id} >
                            <tr>
                              <td className='job-title'>{item.title}</td>
                            </tr>
                            <tr>
                              <td className='position-personnel'>{item.name}</td>
                            </tr>
                          </React.Fragment>
                        ))}
                      </tbody>
                    </table>
                </div>
              </div>
            </div>
          </div>
          <FooterPage />
      </div>
    );
  }

export default Overview;